import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { EquipmentMonitoringService } from '@src/app/services/project/smart-site/equipment-monitoring';
import { NzMessageService } from 'ng-zorro-antd';
declare const echarts: any;

@Component({
  selector: 'app-equipment-monitoring',
  templateUrl: './equipment-monitoring.component.html',
  styleUrls: ['./equipment-monitoring.component.scss']
})
export class EquipmentMonitoringComponent implements OnInit {
  public projectInfo: any = JSON.parse(window.localStorage.getItem('project'));
  public isEquipmentVisible = false;
  public modalTitle = '123';
  public pointerDeg = 'rotate(0deg)';
  public projectPageInfo = {
    nzPageIndex: 0,
    maxResultCount: 12,
    nzTotal: 0,
  };
  public equipmentList = [];
  public equipmentDetailInfo: any = {};
  public echartsTopOption = {};
  public echartsBottomOption = {};

  constructor(
    private router: Router,
    public equipmentMonitoringService: EquipmentMonitoringService,
    private message: NzMessageService
  ) { }

  ngOnInit() {
    const data = {
      skipCount: this.projectPageInfo.nzPageIndex,
      maxResultCount: this.projectPageInfo.maxResultCount,
      status: undefined,
      type: undefined,
      filter: undefined,
      creationTimeRange: undefined,
      sorting: undefined
    };
    this.QueryMachinesPagedList(data);
  }

  pageChange(index) { }
  routeToSurvey() {
    const projectId = JSON.parse(window.localStorage.getItem('project')).id;
    this.router.navigate([`/inner/project/${projectId}/survey`], { queryParams: { info: 'project' } });
  }

  async QueryMachinesPagedList({ status, type, filter, creationTimeRange, sorting, maxResultCount, skipCount }) {
    const res = await this.equipmentMonitoringService.QueryMachinesPagedList({ status, type, filter, creationTimeRange, sorting, maxResultCount, skipCount });
    console.log(res);

    const info = res.result;
    if (info && info.items.length) {
      this.equipmentList = info.items;
      this.projectPageInfo.nzTotal = info.totalCount;
    } else {
      this.message.warning('暂无数据');
    }
  }

  setEchartsTopOption() {
    this.echartsTopOption = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '5%',
        top: '10%',
        bottom: '10%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: []
      },
      yAxis: {
        type: 'value',
        splitLine: {
          lineStyle: { color: '#eee' }    // x轴刻度的颜色
        },
      },
      series: [{
        name: '报警次数',
        itemStyle: {
          color: 'rgba(65, 159, 229, 0.7)'
        },
        lineStyle: {
          normal: {
            color: 'rgba(65, 159, 229, 0.7)'   // 线条颜色
          }
        },
        smooth: true, // 是否平滑曲线显示
        data: [],
        type: 'line',
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(65, 159, 229, 0.7)' },
              { offset: 0.7, color: '#ffffff' }
            ], false),
            // shadowColor: 'rgba(65, 159, 229, 0.7)', //阴影颜色
            // shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
      }, {
        name: '预警次数',
        itemStyle: {
          color: '#ea825b'
        },
        lineStyle: {
          normal: {
            color: '#ea825b'   // 线条颜色
          }
        },
        smooth: true, // 是否平滑曲线显示
        data: [],
        type: 'line',
        areaStyle: { // 区域填充样式
          normal: {
            // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ea825b' },
              { offset: 0.7, color: '#fff' }
            ], false),
            // shadowColor: '#ea825b', //阴影颜色
            // shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
      }]
    };
  }

  async QueryMachinesDetailsById(item) {
    console.log(item);
    this.message.warning('暂无数据'); return;
    // const { blackBoxId, type } = item;
    // const res = await this.equipmentMonitoringService.QueryMachinesDetailsById({ blackBoxId, type });
    // const info = res.result;
    // const xAxis = [];
    // const data1 = [];
    // const data2 = [];
    // if (info) {
    //   this.equipmentDetailInfo = info;
    //   this.modalTitle = info.blackBoxId;
    //   info.warningAndAlarm.forEach(element => {
    //     xAxis.push(element.key);
    //     data1.push(element.value[0]);
    //     data2.push(element.value[1]);
    //   });
    //   this.setEchartsTopOption();
    //   this.echartsTopOption['xAxis'].data = xAxis;
    //   this.echartsTopOption['series'][0].data = data1;
    //   this.echartsTopOption['series'][1].data = data2;
    //   // console.log(this.echartsTopOption)
    //   this.pointerDeg = `rotate(-${info.rotation}deg)`;
    //   console.log(this.pointerDeg);
    //   this.isEquipmentVisible = true;
    // } else {
    //   this.message.warning('查询失败');
    // }
    // this.isEquipmentVisible = true
  }

}
